<template>
    <el-table
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        :max-height="tableHeight"
        row-key="[pay_kind, id]"
        table-layout="auto"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <template v-for="col in tableColumns" :key="col.prop">
            <el-table-column
                v-if="!col.isHidden"
                :align="col.align"
                :prop="col.prop"
                :label="col.label"
                :formatter="col.formatter"
                :type="col.type"
                :fixed="col.fixed"
                :width="col.width"
            >
            </el-table-column>
        </template>
    </el-table>
    <div class="page">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[50, 100, 150, 200]"
            layout="sizes, prev, pager, next"
            :total="totalnum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup lang="ts" name="CategoryDetail">
import { ref, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { ElTable } from 'element-plus';
import type { CategoryDetailReportModel } from '@/common/types/report';
import {
    tableColumnDefault,
    tableDefaultAttribute,
    useTableInfo,
} from '@/hooks/useTable';
import { Request } from '@/app/request';
import { formatDate, transFormatter } from '@/common/tools';
import { TableColumn } from '@/common/types/app';
import { useAppStore } from '@/store/app';
import { tableMaxHeightAdjust } from '@/common/const';
const { category, currency, client, SelectOptionFeeInOut } = storeToRefs(useAppStore());
const tableHeight = ref(100);
const tableRef = ref<InstanceType<typeof ElTable>>();
const props = defineProps<{
    month?: Date,
    category_id?: number
}>();
const onFormatter = (_row: any, column: any, cellValue: any) => {
    let data: { value: string | number; label: string }[];
    if (column['property'] === 'pay_typ') {
        data = category.value;
    } else if (column['property'] === 'pay_kind') {
        data = [
            { value: 'pre_pay', label: '预收付款' },
            { value: 'pay', label: '实收付款' },
        ];
    } else if (column['property'] === 'fee_unit_cod') {
        data = client.value;
    } else if (column['property'] === 'currency_cod') {
        data = currency.value;
    } else if (column['property'] === 'fee_in_out') {
        data = SelectOptionFeeInOut.value;
    } else {
        return cellValue;
    }

    return transFormatter(cellValue, data);
};
const tableColumns = reactive<TableColumn[]>([
    {
        ...tableColumnDefault,
        order: 1,
        prop: 'pay_kind',
        label: '预收付款/实收付款',
        formatter: onFormatter,
        width: 300,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'fee_unit_cod',
        label: '客户',
        formatter: onFormatter,
        width: 300,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'fee_in_out',
        label: '收付款类型',
        formatter: onFormatter,
        width: 300,
    },
    {
        ...tableColumnDefault,
        order: 2,
        prop: 'currency_cod',
        label: '货币',
        formatter: onFormatter,
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 3,
        prop: 'amount',
        label: '金额',
        width: 120,
    },
    {
        ...tableColumnDefault,
        order: 4,
        prop: 'fee_tim',
        label: '付款日期',
        formatter: formatDate,
        width: 200,
    },
]);
onMounted(() => {
    // console.log(props.categoryID);
    // console.log(props.month);
    
    onRefresh();
    tableHeight.value =
        window.innerHeight -
        Math.ceil(tableRef.value?.$el.getBoundingClientRect().bottom) +
        tableMaxHeightAdjust;
    // alert(tableHeight.value);
});
const onRefresh = async () => {
    // console.log('category报表');

    const req = new Request('银行存款流水表', props);
    const r = await req.post();
    tableData.value.length = 0;
    if (r.code > 100) {
        tableData.value = r.obj;
    }
    // console.log(month);
};
const tableData = ref<Array<CategoryDetailReportModel>>([]);
const {
    currentPage,
    pageSize,
    totalnum,
    handleSizeChange,
    handleCurrentChange,
} = useTableInfo(onRefresh);
</script>
<style lang="scss" scoped></style>
